<template>
    <el-form :model="formData" :rules="formRules" size="small" :inline="false" label-width="100px" ref="formRef">
        <el-form-item label="事项主题" prop="title">
            <el-input v-model="formData.title" placeholder="请填写事项主题" clearable maxlength="32"/>
        </el-form-item>
        <el-form-item label="事项描述" prop="content">
            <el-input v-model="formData.content" placeholder="请填写事项描述" type="textarea" :rows="3"/>
        </el-form-item>

        <el-form-item label="抄送人">
            <el-button type="primary" @click="openPicker" icon="ele-User">选择抄送人</el-button>
            <el-tag v-for="(user, i) in copyUsers" :key="user.id" style="margin-left: 10px" closable @close="removeUser(i)">{{ user.name }}</el-tag>
        </el-form-item>

        <org-picker ref="orgPicker" title="请选择抄送人" multiple type="user" :selected="copyUsers" @ok="confirmPick"/>
    </el-form>
</template>

<script>
// 收票单

import Document from '/@/components/document/index.vue'
import {toRefs, ref, reactive, onMounted} from 'vue'
import OrgPicker from '/@/views/setting/workflow/process/OrgPicker.vue'
import {getDictByCodes} from '/@/api/sys/dict'

export default {
    name: 'InvoiceReceive',
    emits: ['update:code'],
    props: {
        editId: {
            default: null,
            type: String
        },
        code: {
            default: null,
            type: String
        },
        customerId: {
            default: null,
            type: String
        },
        supplierId: {
            default: null,
            type: String
        },
        selectTime: {
            default: null,
            type: String
        }
    },
    components: {
        Document,
        OrgPicker
    },
    setup(props, context) {
        const {editId, customerId, supplierId, selectTime} = toRefs(props)
        const formRef = ref()
        const orgPicker = ref()
        const state = reactive({
            formData: {
                title: '收票单',
                type: 'RECEIVE_INVOICE',
                executorIds: []
            },
            formRules: {
                title: {required: true, message: '请填写事项主题', trigger: 'blur'}
            },
            copyUsers: [],      // 选中的抄送人
            typeList: [],    // 发票类型字典列表
        })

        const initData = () => {
            state.formData = {
                id: null,
                title: '收票单',
                type: 'RECEIVE_INVOICE',
                executorIds: [],
                copyIds: [],    // 抄送人id列表
                agendaMatterId: null,
                invoiceType: "1",   // 字典InvoiceType
                content: '',
                occurDate: null,
                actionStartTime: null,
                actionEndTime: null,
                relateItems: [],
                remark: null,
                attach: '',
                attachNames: '',
                priority: 0,
                remindState: 'NONE',
                amount: 0,
                offerNo: null,    // 发票号
                capitalStreamNo: null,    // 钱相关事项特有流水号, 系统自动生成
                capitalTypeId: null,
                capitalAccountId: null,
                customerInvoiceId: null,
                // 可能变成多个?不定数量客户/供应商
                targetData: {
                    id: null,
                    type: 1,
                    name: null
                }
            }
            state.invoiceInfo = {
                id: null,
                customerId: null,
                purchaser: null,
                address: null,
                telephone: null,
                taxpayerIdNo: null,
                openingBank: null,
                bankAccount: null,
                invoiceType: 0,
                invoiceTitle: null,
                checkTakerPhone: null,
                checkTakerMail: null,
                postAddress: null,
                receiveName: null
            }
            getDictByCodes(['InvoiceType']).then(res => state.typeList = res.data['InvoiceType']).catch(e => console.log(e))
        }
        const openPicker = () => {
            orgPicker.value.show()
        }
        // 抄送人确认选择回调
        const confirmPick = (users) => {
            if (users && users.length > 0) {
                state.copyUsers = users
                state.formData.copyIds = []
                users.forEach(user => state.formData.copyIds.push(user.id))
            } else {
                state.copyUsers = state.formData.copyIds = []
            }
        }
        // 抄送人标签移除方法
        const removeUser = (index) => {
            state.copyUsers.splice(index, 1)
            state.formData.copyIds.splice(index, 1)
        }

        onMounted(() => {

        })

        return {
            ...toRefs(state),
            formRef,
            orgPicker,
            openPicker,
            confirmPick,
            removeUser
        }
    }
}
</script>

<style scoped lang="scss">

</style>
